<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="/admin/layui/css/layui.css">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="/js/jquery.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
<p align="center">
    <button id="open" class="layui-btn">开启摄像头</button>
    <button id="close" class="layui-btn">关闭摄像头</button>
    <button id="CatchCode" class="layui-btn">检测</button>
</p>
<div style="width: 270px;margin: 0 auto">
    <video id="video" width="270px" height="220px" autoplay></video>
    <canvas hidden="hidden" id="canvas" width="270" height="220"></canvas>
</div>
</body>
<script type="text/javascript">
    var video;//视频流对象
    var context;//绘制对象
    var canvas;//画布对象
    $(function () {
        var flag = false;
        //开启摄像头
        $("#open").click(function () {
            //判断摄像头是否打开
            if (!flag) {
                //调用摄像头初始化
                open();
                flag = true;
            }
        });
        //关闭摄像头
        $("#close").click(function () {
            //判断摄像头是否打开
            if (flag) {
                video.srcObject.getTracks()[0].stop();
                flag = false;
            }
        });
        //拍照
        $("#CatchCode").click(function () {
            if (flag) {
                context.drawImage(video, 0, 0, 260, 200);
                CatchCode();
            } else
                alert("请先开启摄像头!");
        });
    });

    //将当前图像传输到后台
    function CatchCode() {
        //获取图像
        var img = getBase64();
        //Ajax将Base64字符串传输到后台处理
        $.ajax({
            type: "POST",
            url: "/FaceServlet?opr=reg",
            data: {
                img: img
            },
            dataType: "JSON",
            success: function (data) {
                //返回的结果
                if (parseInt(data.error_code) == 0) {
                    alert("注册成功!");
                    return;
                }else {
                    alert("注册失败!");
                }
                //取出对比结果的返回分数，如果分数90以上就判断识别成功了
                /*    if (parseInt(data.result.user_list[0].score) > 90) {
                       //关闭摄像头
                       video.srcObject.getTracks()[0].stop();
                       //提醒用户识别成功
                       alert("验证成功!");
                       //验证成功跳转页面
                       parent.location.href="/FaceLoginServlet";
                   }else{
                       alert("请重新识别！");
                   }*/
            },
            error: function (q, w, e) {
                //alert(q + w + e);
                alert("服务器异常，请稍候尝试！")
            }
        });
    };

    //开启摄像头
    function open() {
        //获取摄像头对象
        canvas = document.getElementById("canvas");
        context = canvas.getContext("2d");
        //获取视频流
        video = document.getElementById("video");
        var videoObj = {
            "video": true
        }, errBack = function (error) {
            console.log("Video capture error: ", error.code);
        };
        context.drawImage(video, 0, 0, 330, 250);
        //初始化摄像头参数
        if (navigator.getUserMedia || navigator.webkitGetUserMedia
            || navigator.mozGetUserMedia) {
            navigator.getUserMedia = navigator.getUserMedia
                || navigator.webkitGetUserMedia
                || navigator.mozGetUserMedia;
            navigator.getUserMedia(videoObj, function (stream) {
                video.srcObject = stream;
                video.play();
            }, errBack);
        }
    }

    //将摄像头拍取的图片转换为Base64格式字符串
    function getBase64() {
        //获取当前图像并转换为Base64的字符串
        var imgSrc = canvas.toDataURL("image/png");
        //截取字符串 （去除图片头：data:image/jpg;base64,）
        return imgSrc.substring(22);
    };
</script>
</html>